<template>
  <div class="applytable-container">
    <table class="exam_ticket" cellspacing="0" border="0" cellpadding="0">
      <caption>
        <div class="driveInfo">
          <div class="examApply-title">{{ catagory.name }}从业资格考试申请表</div>
          <div class="qrcode" v-if="table.qrcode">
            <img :src="getImage(table.qrcode)" fit="['fill']" />
          </div>
        </div>
        <div class="flex">
          <h6 class="flex-1 text-left bold">NO.{{ table.studentCode }}</h6>
          <h6 class="flex-1 text-left bold">
            <span v-if="table.isTrain === false">{{ table.schoolName }}</span>
          </h6>
          <h6 class="flex-1 text-right" style="padding-right: 10px">
            <span v-if="table.enrollBatch">[{{ table.enrollBatch }}]</span>
          </h6>
        </div>
      </caption>
      <colgroup>
        <col width="10%" v-for="it in 9" :key="it" />
      </colgroup>
      <tbody>
        <tr>
          <template v-if="!isTaxi">
            <td colspan="2"><h6 class="bold">姓名</h6></td>
            <td>{{ table.name }}</td>
            <td><h6 class="bold">性别</h6></td>
            <td>{{ table.gender }}</td>
            <td><h6 class="bold">学历</h6></td>
            <td>{{ table.education }}</td>
          </template>
          <template v-else>
            <td colspan="2"><h6 class="bold">姓名</h6></td>
            <td colspan="2">{{ table.name }}</td>
            <td><h6 class="bold">性别</h6></td>
            <td colspan="2">{{ table.gender }}</td>
          </template>
          <td colspan="2" :rowspan="isTaxi ? 4 : 5">
            <div class="picture" v-if="table.headImg">
              <img :src="getImage(table.headImg)" fit="['fill']" />
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2"><h6 class="bold">住址</h6></td>
          <td colspan="5">
            {{ table.residentialAddress
            }}<span v-if="table.telephone">(电话: {{ table.telephone }})</span>
          </td>
        </tr>
        <tr v-if="!isTaxi">
          <td colspan="2"><h6 class="bold">工作单位</h6></td>
          <td colspan="5">{{ table.companyName }}</td>
        </tr>
        <tr>
          <td colspan="2"><h6 class="bold">身份证号</h6></td>
          <td colspan="5">{{ table.cardNo }}</td>
        </tr>
        <tr>
          <td colspan="2"><h6 class="bold">培训单位</h6></td>
          <td colspan="5">{{ table.isTrain ? table.schoolName : '' }}</td>
        </tr>
        <tr>
          <td colspan="2"><h6 class="bold">驾驶证准驾车型</h6></td>
          <td colspan="3">{{ table.driverType }}</td>
          <td colspan="2"><h6 class="bold">初领驾驶证日期</h6></td>
          <td colspan="2">{{ table.driverFirstIssueDate }}</td>
        </tr>
        <tr v-if="!isTaxi">
          <td colspan="2"><h6 class="bold">原从业资格证件号</h6></td>
          <td colspan="7">{{ table.cardNo }}</td>
        </tr>
        <tr v-if="catagory.type.length > 0">
          <td colspan="2"><h6 class="bold">申请种类</h6></td>
          <td colspan="8">
            <div class="flex justify-center">
              <div
                class="flex"
                style="margin-left: 10px; align-items: center"
                :key="index"
                v-for="(item, index) in catagory.type"
                :label="item.name"
              >
                <input
                  type="checkbox"
                  :id="`checktype${index}`"
                  class="flex flex-start"
                  :checked="table.isFirst === item.value"
                />
                <label :for="`checktype${index}`">&nbsp;{{ item.name }}</label>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2"><h6 class="bold">申请类别</h6></td>
          <td colspan="7">
            <div class="flex justify-center disabled-check">
              <div
                class="flex"
                style="margin-left: 10px; align-items: center"
                :key="index"
                v-for="(item, index) in catagory.applyCatagory"
                :label="item.name"
              >
                <input
                  type="checkbox"
                  :id="`check${index}`"
                  class="flex flex-start"
                  :checked="table.applyType == item.name"
                />
                <label :for="`check${index}`">&nbsp;{{ item.name }}</label>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2"><h6 class="bold">材料清单</h6></td>
          <td colspan="7">
            <div class="flex justify-center disabled-check">
              <div
                class="flex"
                style="align-items: center"
                :key="index"
                v-for="(item, index) in catagory.studentMaterialsLists"
              >
                <input type="checkbox" :id="`checkmaterial${index}`" class="flex flex-start" :checked="item.url" v-if="item.url"/>
                <input type="checkbox" :id="`checkmaterial${index}`" class="flex flex-start" :checked="item.imgUrl" v-else-if="item.imgUrl"/>
                <div class="text-left">
                  <a
                    v-if="item.url || item.imgUrl"
                    :for="`checkmaterial${index}`"
                    :href="item.url || item.imgUrl"
                    target="_black"
                  >{{item.name}}</a>  
                  <span v-else>{{item.name}}&nbsp;&nbsp;</span>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2"><h6 class="bold">承诺</h6></td>
          <td colspan="7">
            <div class="px-5 my-2 text-left">
              本人承诺上述所有内容真实、有效，并承担由此产生的法律责任。
            </div>
            <div class="flex items-center justify-around" style="padding-top: 30px">
              <span class="flex items-center"
                >本人签字：
                <img
                  v-if="table.esignature"
                  style="width: 120px; height: 60px"
                  fit="contain"
                  :src="getImage(table.esignature)"
                />
                <span v-else> {{ table.name }}</span>
              </span>
              <span style="padding-right: 100px">日期: {{ getTime(table) }}</span>
            </div>
          </td>
        </tr>
        <template v-if="isTaxi">
          <tr>
            <td colspan="2" :rowspan="1 + catagory.scoreList.length">
              <h6 class="bold">考试记录</h6>
            </td>
            <td colspan="3"><h6 class="bold">成绩</h6></td>
            <td colspan="2"><h6 class="bold">考试时间</h6></td>
            <td colspan="1"><h6 class="bold">考核员</h6></td>
            <td colspan="1"><h6 class="bold">考核员</h6></td>
          </tr>
          <tr :key="index" v-for="(item, index) in catagory.scoreList">
            <td colspan="3">
              <h6 class="bold">{{ item.subjectName }} &nbsp;&nbsp;{{ item.score }}</h6>
            </td>
            <td colspan="2">{{ item.examTime }}</td>
            <td colspan="1">
              <img
                style="width: 80px; height: 30px"
                v-if="item.testerOneImg"
                :src="getImage(item.testerOneImg)"
                alt=""
              />
              <span v-else>{{ item.testerOne }}</span>  
            </td>
            <td colspan="1">
              <img
                style="width: 80px; height: 30px"
                v-if="item.testerTwoImg"
                :src="getImage(item.testerTwoImg)"
                alt=""
              />
              <span v-else>{{ item.testerTwo }}</span>  
            </td>
          </tr>
        </template>
        <template v-else>
          <tr>
            <td colspan="2" :rowspan="1 + catagory.scoreList.length">
              <h6 class="bold">考试记录</h6>
            </td>
            <td colspan="3"><h6 class="bold">成绩</h6></td>
            <td colspan="2"><h6 class="bold">考核员</h6></td>
            <td colspan="2"><h6 class="bold">考核员</h6></td>
          </tr>
          <tr :key="index" v-for="(item, index) in catagory.scoreList">
            <td colspan="3">
              <h6 class="bold">{{ item.subjectName }}&nbsp;&nbsp;{{ item.score }}</h6>
            </td>
            <td colspan="2">
              <img
                style="width: 80px; height: 30px"
                v-if="item.testerOneImg"
                :src="getImage(item.testerOneImg)"
                alt=""
              />
              <span v-else>{{ item.testerOne }}</span>
            </td>
            <td colspan="2">
              <img
                style="width: 80px; height: 30px"
                v-if="item.testerTwoImg"
                :src="getImage(item.testerTwoImg)"
                alt=""
              />
              <span v-else>{{ item.testerTwo }}</span>
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="2"><h6 class="bold">交通运输主管部门意见</h6></td>
          <td colspan="7">
            <div v-if="isTaxi">
              <p class="text-left">经审核：</p>
              <div class="flex">
                <input type="checkbox" id="checkaudit" class="flex flex-start" v-model="checked" />
                <label for="checkaudit"
                  >&nbsp;同意发证（具备从业资格条件，且从业资格考试合格）</label
                >
              </div>
              <div class="flex">
                <input type="checkbox" class="flex flex-start" id="checkaudit1" v-model="checked" />
                <label for="checkaudit1">&nbsp;不同意发证，理由:</label>
              </div>
            </div>
            <div v-else-if="table.signatureUrl"  class="flex" style=" padding: 20px 0 0 20px;">
              <img style="width: 100px; height: 100px;margin-bottom: -50px;"
              :src="getImage(table.signatureUrl)" alt="">
            </div>
            <div v-else style="height: 60px"></div>
            <div>
              <div class="text-right" style="padding: 10px 80px 0 0">(盖 章)</div>
              <div class="text-right" style="padding: 10px 80px 5px 0">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</div>
            </div>
          </td>
        </tr>
        <tr v-if="isTaxi">
          <td colspan="2" rowspan="3"><h6 class="bold">从业资格证件发放</h6></td>
          <td colspan="2"><h6 class="bold">从业资格证号</h6></td>
          <td colspan="5"></td>
        </tr>
        <tr>
          <td v-if="!isTaxi" colspan="2" rowspan="2"><h6 class="bold">从业资格证件发放</h6></td>
          <td colspan="2"><h6 class="bold">发放人(签字)</h6></td>
          <td colspan="2"></td>
          <td colspan="1"><h6 class="bold">日期</h6></td>
          <td colspan="2"></td>
        </tr>
        <tr>
          <td colspan="2"><h6 class="bold">领取人(签字)</h6></td>
          <td colspan="2"></td>
          <td colspan="1"><h6 class="bold">日期</h6></td>
          <td colspan="2"></td>
        </tr>
      </tbody>
    </table>
    <p v-if="table.describe" class="mt-2 text-justify">
      {{table.describe}}
    </p>
  </div>
</template>

<script>
import { defineComponent, computed, reactive, toRefs, watch } from "vue-demi"
const applyTypeArray = [
  { name: '经营性道路旅客运输驾驶员', label: '经营性道路客货运输驾驶员', arr: [] },
  { name: '经营性道路货物运输驾驶员', label: '经营性道路客货运输驾驶员', arr: [] },
  { name: '道路危险货物运输驾驶员', label: '道路危险货物运输', arr: [] },
  { name: '道路危险货物运输装卸管理人员', label: '道路危险货物运输', arr: [] },
  { name: '道路危险货物运输押运人员', label: '道路危险货物运输', arr: [] },
  { name: '放射性物品道路运输驾驶员', label: '放射性物品道路运输', arr: [] },
  { name: '放射性物品道路运输装卸管理人员', label: '放射性物品道路运输', arr: [] },
  { name: '放射性物品道路运输押运人员', label: '放射性物品道路运输', arr: [] },
  { name: '剧毒化学品道路运输驾驶员', label: '剧毒品运输', arr: [] },
  { name: '剧毒化学品道路运输装卸管理人员', label: '剧毒品运输', arr: [] },
  { name: '剧毒化学品道路运输押运人员', label: '剧毒品运输', arr: [] },
  { name: '爆炸品道路运输驾驶员', label: '爆炸品运输', arr: [] },
  { name: '爆炸品道路运输装卸管理人员', label: '爆炸品运输', arr: [] },
  { name: '爆炸品道路运输押运人员', label: '爆炸品运输', arr: [] },
  {
    name: '巡游出租汽车驾驶员',
    label: '出租汽车驾驶员',
    arr: [{ subjectName: '全国公共科目' }, { subjectName: '区域理论' }, { subjectName: '区域操作' }]
  },
  {
    name: '网络预约出租汽车驾驶员',
    label: '出租汽车驾驶员',
    arr: [{ subjectName: '全国公共科目' }, { subjectName: '区域理论' }, {}]
  }
]

const getCategory = tableType => {
  const catagory = {
    customer: {
      name: '经营性道路客货运输驾驶员',
      //申请类型
      type: [
        { name: '初领', value: 0 },
        { name: '增驾', value: 1 }
      ],
      //申请类别
      applyCatagory: [],
      //材料清单
      studentMaterialsLists: [],
      scoreList: [{ subjectName: '理论' }, { subjectName: '应用能力' }, {}]
    },
    danger: {
      name: '道路危险货物运输',
      studentMaterialsLists: [],
      type: [],
      applyCatagory: [],
      scoreList: [{ subjectName: '基础知识' }, { subjectName: '专业知识' }, {}]
    },
    radioaction: {
      name: '放射性物品道路运输',
      studentMaterialsLists: [],
      type: [],
      applyCatagory: [],
      scoreList: [{ subjectName: '理论' }, {}, {}]
    },
    toxic: {
      name: '剧毒品运输',
      studentMaterialsLists: [],
      type: [],
      applyCatagory: [],
      scoreList: [{ subjectName: '基础知识' }, { subjectName: '专业知识' }, {}]
    },
    explosive: {
      name: '爆炸品运输',
      studentMaterialsLists: [],
      type: [],
      applyCatagory: [],
      scoreList: [{ subjectName: '基础知识' }, { subjectName: '专业知识' }, {}]
    },
    taxi: {
      name: '出租汽车驾驶员',
      type: [],
      applyCatagory: [],
      studentMaterialsLists: [],
      scoreList: []
    }
  }
  return catagory[tableType]
}
import { getImage } from '../../utils/common' 

export default defineComponent({
  name: 'applyTable',
  props: {
    childData: {
      type: Object,
      default: () => {}
    }
  },
  setup(prop, { root }) {

    const isTaxi = computed(() => {
      return data.catagory.name === '出租汽车驾驶员'
    })

    const data = reactive({
      checked: false,
      catagory: {
        name: '',
        type: [],
        scoreList: [],
        applyCatagory: [],
        studentMaterialsLists: []
      },
      applyType: '',
      table: {}
    })

    const getTime = (info) => {
      if (info.applyTime) return info.applyTime
      if (info.createdTime) return info.createdTime
    }

    watch(() => prop.childData, (newVal) => {
      const { applyType, tableType } = newVal
        if (tableType) {
          data.table = { ...newVal }
          data.applyType = applyType || ''
          data.catagory = getCategory(tableType)
          data.catagory.applyCatagory =
            applyTypeArray.filter(item => item.label === data.catagory.name) || []
          let { scoreList } = data.table
          let len = scoreList.length
          if (len === 0) {
            if (applyType === '巡游出租汽车驾驶员' || applyType === '网络预约出租汽车驾驶员') {
              data.catagory.scoreList = applyTypeArray.find(
                item => item.name === applyType
              )?.arr
            } else {
              data.catagory.scoreList = getCategory(tableType).scoreList
            }
          } else if (len > 0) {
            if (len < 3) {
              let fileArr = new Array(3 - len).fill({})
              scoreList = [...scoreList, ...fileArr]
            }
            data.catagory.scoreList = scoreList
          }
          data.catagory.studentMaterialsLists = data.table.studentMaterialsLists?.map(item => {
            return { 
              ...item,
              url: getImage(item.url)
            }
          }) ?? []
        }
    }, {
      deep: true,
      immediate: true
    })

    return {
      ...toRefs(data),
      getImage,
      getTime,
      isTaxi
    }
  }
}) 
</script>
<style lang="scss" scoped>
.applytable-container {
  a {
    text-decoration: none;
  }
  .examApply-title {
    font-size: 25px !important;
    font-weight: bold !important;
  }
  .bold {
    font-weight: bold;
  }
  .items-center {
    align-items: center;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .flex {
    display: flex;
  }
  .justify-center {
    justify-content: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .driveInfo {
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 20px auto;
    height: 60px;
    display: flex;
    h6 {
      border: 1px solid #000000;
      padding: 0 3px;
    }
    .qrcode {
      position: absolute;
      right: 0;
      top: -15px;
      img {
        width: 100px;
        height: 100px;
      }
    }
  }
  h6 {
    margin: 2px 0;
    font-size: 16px;
  }
  .exam_ticket {
    width: 800px;
    font-size: 16px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    td,
    th {
      text-align: center;
      height: 30px !important;
      max-width: 90px;
      min-width: 60px;
      padding: 2px 5px;
      border-bottom: 1px solid gray;
      border-right: 1px solid gray;
    }
    .picture {
      img {
        width: 113px;
        height: 150px;
        margin: 0 auto;
      }
    }
  }
  .disabled-check{
    input, label{
      pointer-events: none; // 禁止点击
    }
  }
}
</style>
